<template>
	<view class="login-container">
		<!-- 顶部Logo区域 -->
		<view class="container-view">


			<view class="logo-section">
				<!--      <image class="pool-table-logo" src="/static/logo.png"></image> -->
				<text class="shop-name">logo店名</text>
			</view>

			<!-- 登录表单区域 -->
			<view class="form-card">
				<view class="form-container">
					<!-- 用户名输入 -->
					<view class="input-group">
						<text class="input-label">用户名</text>
						<input class="input-field" type="text" placeholder="请输入用户名" v-model="username"
							@input="validateForm" />
					</view>

					<!-- 密码输入 -->
					<view class="input-group">
						<text class="input-label">密码</text>
						<view class="password-input-wrapper">
							<input class="input-field password-input" :type="showPassword ? 'text' : 'password'"
								placeholder="请输入密码" v-model="password" @input="validateForm" />
							<view class="password-toggle" @click="togglePasswordVisibility">
								<image class="eye-icon" src="/static/login/yanjing_1@3x.png"></image>
							</view>
						</view>
					</view>

					<!-- 记住密码和忘记密码 -->
					<view class="password-options">
						<view class="remember-password" @click="toggleRememberPassword">
							<view class="checkbox" :class="{ 'checked': rememberPassword }">
								<text v-if="rememberPassword" class="check-icon">✓</text>
							</view>
							<text class="remember-text">记住密码</text>
						</view>
						<text class="forgot-password" @click="handleForgotPassword">忘记密码？</text>
					</view>

					<!-- 登录按钮 -->
					<button class="login-button" @click="handleLogin">
						登录
					</button>
				</view>
			</view>
		</view>
		<!-- 错误提示 -->
		<view v-if="errorMessage" class="error-message">
			{{ errorMessage }}
		</view>
	</view>
</template>

<script>
	import { getUserInfo,getStortLogin } from '@/utils/tools.js'

	export default {
		data() {
			return {
				username: "shop01",
				password: "liuzhen123",
				showPassword: false,
				rememberPassword: true,
				errorMessage: '',
				isFormValid: false
			}
		},
		onLoad() {
			// 检查是否有保存的登录信息
			this.checkSavedCredentials();
		},
		methods: {
			// 表单校验
			validateForm() {
				this.isFormValid = this.username.trim() !== '' && this.password.trim() !== '';
				// 清除错误信息
				if (this.errorMessage) {
					this.errorMessage = '';
				}
			},

			// 切换密码显示/隐藏
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},

			// 切换记住密码状态
			toggleRememberPassword() {
				this.rememberPassword = !this.rememberPassword;
			},

			// 处理登录
			async handleLogin() {// 表单验证
				if (!this.username.trim()) {
					this.$uv.toast("请输入用户名");
					this.shakeInput("username");
					return;
				}

				if (!this.password.trim()) {
					this.$uv.toast("请输入密码");
					this.shakeInput("password");
					return;
				}
				let loginRes = await this.$request({
					url: `/index/login`,
					method: 'POST',
					data: {
						username: this.username,
						password: this.password
					}
				})
				console.log(loginRes, '-----loginRes')
				// 存储用户信息
				uni.setStorage({
					key: 'userInfo',
					data: loginRes.data.user,
					success: () => {
						console.log('数据存储成功');
					},
					fail: (err) => {
						console.error('存储失败:', err);
					}
				})
				this.$store.commit('SET_TOKEN', loginRes.data.user.token);
				await getStortLogin()

				// 登录成功后跳转到首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			},

			// 处理忘记密码
			handleForgotPassword() {
				console.log('忘记密码');
				// 实际项目中应该跳转到找回密码页面
				uni.showToast({
					title: '找回密码功能待实现',
					icon: 'none'
				});
			},

			// 检查是否有保存的登录信息
			checkSavedCredentials() {
				try {
					const savedUsername = uni.getStorageSync('username');
					if (savedUsername) {
						this.username = savedUsername;
						this.validateForm();
					}
				} catch (e) {
					console.error('读取登录信息失败:', e);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 388rpx 28rpx 0 28rpx;
		background-color: #fff;
		min-height: 100vh;
		box-sizing: border-box;

		background-image: url('/static/login/Group_3@3x.png');
		background-size: contain;
		/* 完整显示图片，可能有空白 */
		// background-position: center;
		background-repeat: no-repeat;
	}

	.container-view {
		box-sizing: border-box;
		width: 694rpx;
		height: 862rpx;
		box-sizing: border-box;
		background-image: url('/static/login/Group_4@2x.png');
		background-size: contain;
		/* 完整显示图片，可能有空白 */
		// background-position: center;
		background-repeat: no-repeat;
	}

	/* 表单卡片 */
	.form-card {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		// background-color: #FFFFFF;
		// border-radius: 20rpx;
		// margin-bottom: 40rpx;

	}

	/* Logo区域 */
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 694rpx;
		height: 238rpx;
		line-height: 238rpx;
	}

	.pool-table-logo {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 20rpx;
	}

	.shop-name {
		font-size: 48rpx;
		color: #333333;
		font-weight: bold;
	}

	/* 表单容器 */
	.form-container {
		width: 100%;
		padding: 40rpx;
		box-sizing: border-box;
	}

	/* 输入组 */
	.input-group {
		margin-bottom: 40rpx;
	}

	.input-label {
		display: block;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 12rpx;
	}

	.input-field {
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #333333;
		box-sizing: border-box;
	}

	.input-field::placeholder {
		color: #999999;
	}

	/* 密码输入 */
	.password-input-wrapper {
		position: relative;
	}

	.password-input {
		padding-right: 90rpx;
	}

	.password-toggle {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.eye-icon {
		width: 36rpx;
		height: 36rpx;
	}

	/* 密码选项 */
	.password-options {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.remember-password {
		display: flex;
		align-items: center;
	}

	.checkbox {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 8rpx;
		margin-right: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.checkbox.checked {
		background-color: #1EBE76;
		border-color: #1EBE76;
	}

	.check-icon {
		width: 20rpx;
		height: 16rpx;
	}

	.remember-text {
		font-size: 26rpx;
		color: #666666;
	}

	.forgot-password {
		font-size: 26rpx;
		color: #1EBE76;
	}

	/* 登录按钮 */
	.login-button {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1EBE76;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.login-button:disabled {
		background-color: #CCCCCC;
		color: #FFFFFF;
	}

	/* 错误提示 */
	.error-message {
		width: 100%;
		padding: 20rpx;
		background-color: #FFF2F0;
		color: #F5222D;
		font-size: 26rpx;
		text-align: center;
		border-radius: 12rpx;
		box-sizing: border-box;
	}

	/* 复选框样式优化 */
	.check-icon {
		color: #FFFFFF;
		font-size: 20rpx;
		font-weight: bold;
	}
</style>